<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>穿越世纪来爱你</title>
    <!--定宽， 通过游览器自动缩放（等比）-->
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">
    <meta name="apple-touch-fullscreen" content="YES">
    <meta name="format-detection" content="telephone=no">
    <meta name="apple-mobile-web-app-status-bar-style" content="black"/>

    <link rel="stylesheet" type="text/css" href="/Public/projects/facego/style/base.css">
    <link rel="stylesheet" type="text/css" href="/Public/projects/facego/style/common_class.css">
    <!-- <link rel="stylesheet/less" type="text/css" href="/Public/projects/facego/style/common_class.less"> -->
    <link rel="stylesheet" type="text/css" href="/Public/projects/facego/style/index.css">
    <!-- <link rel="stylesheet/less" type="text/css" href="/Public/projects/facego/style/index.less"> -->
</head>
<body>

<audio id="bgm" src="/Public/projects/facego/assets/media/bgm.mp3" loop="loop">
    您的浏览器不支持 audio 标签。
</audio>
<div class="ico-music1 ico"></div>

<div id="page1" segment class="bg-img">
    
    <div class="heart-block h-center">
        <div class="heart ico animHeart2"></div>
        <div class="go ico "></div>
    </div>
</div>
<div id="page2" segment class="none bg-img">
    <div class="baseline v-center">
        <div class="title">
            <img src="/Public/projects/facego/assets/ui/img_txt.png">
        </div>
        <div class="input-block bg-img">
            <img src="/Public/projects/facego/assets/ui/input_block.png">
            <div class="ico plus v-center h-center" style="z-index: 3"></div>
            <div class="pic h-center">
                <img id="head-img" >
                <input type="file" id="uploader">
            </div>
        </div>
        <div class="touch">
            <img src="/Public/projects/facego/assets/ui/btn_touch.png">
        </div>
    </div>
</div>
<div class="mask none">
    <div class="baseline v-center">
        <img src="/Public/projects/facego/assets/ui/dialog_error.png" class="error">
    </div>
</div>
<!-- ========================================================================= -->
<script src="/Public/projects/facego/libs/jquery-3.1.1.min.js"></script>
<script src="/Public/projects/facego/libs/exif.js"></script>

<!--WeiXin-->
<script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>

<!--BaiDu 统计-->
<script src="/Public/js/common/baidutongji.js"></script>

<!-- <script src="/Public/projects/facego/libs/less.js"></script> -->
<!--common of all js file-->
<script src="/Public/projects/facego/js/common.js"></script>
<!--add self scrip file-->
<script>
$(function () {

    $('.heart, .go').click(function(e){
        $('#page1').hide()
        $('#page2').show()
    })

    $("#uploader").on("change",function (event) {
        uploadImg(event,$('#head-img'));
    });

    $('.touch img').click(function(e){
        $(".mask img").attr('src', "/Public/projects/facego/wait.png")
        $(".mask").show()
        maskCanHide = false
        ns.ajax({
            url: "facecheck",
            type: "post",
            data: {
                img: $('#head-img').attr("result") || ''
            },
            success: function(r){
                maskCanHide = true
                $(".mask").hide()
                if(r.code < 0){
                    $(".mask img").attr('src', "/Public/projects/facego/assets/ui/dialog_error.png")
                    $(".mask").show()
                }else{
                    window.location.href = "/Wap/Applications/facego"
                }
            }
        })
    })

    var maskCanHide = true
    $('.mask').click(function(e){
        maskCanHide && $(this).hide()
        // $('#head-img').attr("src","/Public/projects/facego/assets/ui/transparent.png")
    })

    function toggleMusic(boo) {
        var music = $(".ico-music1");
        if(!boo){
            music.removeClass("animRotate");
            $("#bgm")[0].pause();
        }else{
            music.addClass("animRotate");
            $("#bgm")[0].play();
        }
    }
    $(".ico-music1").click(function () {
        toggleMusic(!$(this).hasClass("animRotate"));
    });

    setTimeout(function(){
        if(typeof WeixinJSBridge == 'undefined' ){
            toggleMusic(true)
            return
        }
        WeixinJSBridge.invoke('getNetworkType', {}, function(e) {
            toggleMusic(true)
        })
    },2000)

    function setCompressedImage(url, $showNode){
        var image = new Image();
        image.onload = function () {
            EXIF.getData(this, function() {
                var make = EXIF.getTag(this, "Make"),
                    model = EXIF.getTag(this, "Model"),
                    orientation = EXIF.getTag(this, 'Orientation');
                var rotateDir = "";
                if(orientation == 6){
                    rotateDir = 'left';
                    $showNode.addClass("rotate");
                }
                if(orientation == 3){
                    rotateDir = "bottom";
                    $showNode.addClass("rotateR");
                }
//                alert('isRotation'+orientation)
                var data = compress(image, image.type ,512,1024,rotateDir);
                //图片首先进行压缩
                $showNode.attr("src", data.src);
                $showNode.attr("result",data.org);
            });

        }
        image.src = url;
    }

    function uploadImg(event ,$showNode) {
        var img = event.target.files[0];
        // 判断是否图片
        if(!img) return ;
        // 判断图片格式
        if(!(img.type.indexOf('image')==0 && img.type && (/\.jpg$|\.png$|\.jpeg$|\.gif$/i).test(img.name)) ){
            alert('图片只能是jpg,png');
            return ;
        }
        var reader = new FileReader();
        reader.readAsDataURL(img);
        $showNode.removeClass("rotate");
        $showNode.removeClass("rotateR");
        reader.onload = function (e) {
            var result = e.target.result;
            var maxSize = 1024 * 1024;// 大于1M 的图片 进行压缩
            if(result.length < maxSize) {
                $showNode.attr("src", result);
                $showNode.attr("result",result);
            } else {
                setCompressedImage(result, $showNode);
            }
        } ;
    }

    var
            canvas = document.createElement('canvas'),
            ctx = canvas.getContext('2d');
    function resize(img ,size) {
        var w,h,s,x=0,y=0;
        if(img.width>img.height){
            s = img.height / size.h;
            h = img.height;
            x = (img.width - size.w*s) / 2;
            w = img.width - x*2;
        }else{
            s = img.width / size.w;
            w = img.width;
            y = (img.height - size.h*s) / 2;
            h = img.height - y*2;
        }
        return{
            x:x ,y:y, w:w, h:h
        }
    }

    $(function(){
        wxShareConfig();
    });
    function getWxShare(cb) {
        ns.ajax({
            url:"weixinShare",
            data:{
                url:location.href.split("#")[0]
            },
            success:function (result) {
                if(result.status != 1){
                    //alert(result.msg);
                }else{
                    cb && cb(result);
                }
            }
        });
    }
    function wxShareConfig(){
        getWxShare(function (ws) {
            wx.config({
                debug: false,
                appId: ws['appId'],
                timestamp: ws['timestamp'],
                nonceStr: ws['nonceStr'],
                signature: ws['signature'],
                jsApiList: ['onMenuShareAppMessage','onMenuShareTimeline']
            });
            wx.error(function(res){
                console.log(res);
            });
            wx.ready( function( e ){
                wx.onMenuShareAppMessage({
                    title: "穿越世纪来爱你",
                    desc: "穿越世纪来爱你",
                    link: "http://" + window.location.host + "/Wap/Applications/faceindex",
                    imgUrl: "http://" + window.location.host + "/Public/projects/facego/again.png",
                    type: 'link',
                    dataUrl: '',
                    success: function () {},
                    cancel: function () {}
                });
                wx.onMenuShareTimeline({
                    title: "穿越世纪来爱你",
                    link: "http://" + window.location.host + "/Wap/Applications/faceindex",
                    imgUrl: "http://" + window.location.host + "/Public/projects/facego/again.png",
                    success: function () {},
                    cancel: function () {}
                });
            })
        });
    }

    function compress(img ,type, srcSize ,uploadSize,rotateDir) {
        var data = {};

        var size = {"w":srcSize*1.07 ,"h":srcSize};
        var rect = resize(img ,size);
        canvas.width = size.w;
        canvas.height = size.h;
        ctx.drawImage(img, rect.x, rect.y, rect.w, rect.h,0, 0,size.w,size.h);
        data.src = canvas.toDataURL(type||'image/jpeg', 1);
        var ch ,cw;
        if(img.height < img.width){
            ch = uploadSize;
            cw = img.width * ch/img.height;
        }else{
            cw = uploadSize;
            ch = img.height * cw/img.width;
        }
        
        if(rotateDir != ""){
            var temp = ch;
            ch = cw;
            cw = temp;
            canvas.width = cw;
            canvas.height = ch;
            //保存状态
            ctx.save();
            // 设置画布原点到中点
            ctx.translate(cw/2,ch/2);
            //逆时针旋转90度
            if(rotateDir == "left"){
                ctx.rotate(90*Math.PI/180);
            }else if(rotateDir == "bottom"){
                ctx.rotate(Math.PI);
            }
            //再设置到画布原点，注：旋转后画布的宽高 = 原先的高宽！
            ctx.translate(-ch/2,-cw/2); 
            //参数： 图像 ，图原点x,图原点y ,图源的宽，图源的高，画布原点x，画布原点y，画布宽（旋转后值变成了以前的高） ，画布高（旋转后值变成了以前的宽）
            ctx.drawImage(img, 0,0,img.width,img.height, 0, 0,ch,cw);
            //恢复状态
            ctx.restore();

        }else{
            canvas.width = cw;
            canvas.height = ch;
            ctx.drawImage(img, 0,0,img.width,img.height, 0, 0,cw,ch);
        }

        data.org = canvas.toDataURL(type||'image/jpeg', 1);

        return data;
    }
})
</script>

</body>
</html>